<template class="dashboard-container">
  <div class="app-container">
    <!-- 头部 -->
    <el-card>
      <PageTools>
        <template #before>
          <el-button type="primary" size="small" @click="addClient">添加客户</el-button>
        </template>
        <template #after>
          <!-- 后半部分 -->
          <el-select v-model="agent_contains" placeholder="请选择">
            <el-option label="全部经纪" :value="agent_contains?'':agent_contains" />
            <el-option v-for="item in agentsList " :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-input v-model="inputValue" placeholder="请输入关键字" />
          <el-button @click="searchFn">筛选</el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <el-table :data="tableData" border>
        <el-table-column label="图片" prop="image" width="200px">
          <template v-slot="{row}">
            <img v-imgErr="require('@/assets/common/OIP-C.jpg')" :src="row.image" width="100%">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column
          label="邮箱"
          prop="email"
        />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="经纪" prop="agent.name" />
        <el-table-column label="微信" prop="wechat" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="2"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 添加客户 弹出框 -->
    <addClient ref="addClient" :agents-list="agentsList" :show-dialog.sync="showDialog" @update="getClientList" />
  </div>
</template>

<script>
import { getClients, getClientsCount, delClients, getClinetsDetail } from '@/api/client'
// 获取经济列表
import { getAgentsList, getAgentsListTotal } from '@/api/agents'
import addClient from './components/addClients.vue'
export default {
  components: {
    addClient
  },
  data() {
    return {
      tableData: [], // 表格数据
      agentsList: [], // 经纪人列表
      total: 0, // 客户总数量
      showDialog: false, // 控制dialog组件的控制隐藏
      inputValue: '', // 输入框的值
      List: {
        _limit: 2, // 每页的获取条数
        _start: 0 // 开始获取的位置
        // name_contains: '', // 模糊搜索名称
        // agent: '', // 筛选相关经纪, 传入经纪 id
        // agent_contains: ''
      },
      // 经纪列表
      agentsListone: {
        _limit: '',
        _start: '',
        name_contains: ''
      },
      agent_contains: ''// 经纪的下拉框value

    }
  },
  created() {
    // 获取客户列表
    this.getClientList()
    // 获取经纪人列表
    this.getAgents()
  },
  methods: {
    // 获取客户列表
    async getClientList() {
      // 客户列表
      const res = await getClients(this.List)
      // 分页总数
      const result = await getClientsCount(this.List)
      this.tableData = res.data
      this.total = result.data
    },
    // 获取经纪人列表
    async getAgents() {
      const res = await getAgentsListTotal('')
      this.agentsListone._limit = res.data
      const agents = await getAgentsList(this.agentsListone)
      this.agentsList = agents.data
      // console.log(103, this.agentsList)
    },
    // 分页器功能
    currentChange(page) {
      this.List = {
        _limit: 2,
        _start: `${(page - 1) * 2}`
      }
      // 刷新列表
      this.getClientList()
    },
    // 添加客户
    addClient() {
      // 打开弹框
      this.showDialog = true
    },
    // 删除客户
    del(id) {
      this.$confirm('请问你真的要删除吗?', '提示', {
        type: 'warning'
      }).then(async() => {
        await delClients(id)
        this.getClientList()
        this.$message.success('删除成功')
      }).catch(() => {
        console.log('用户点击了取消')
      })
    },
    // 弹窗编辑框
    async edit(id) {
      // 提出编辑框
      this.showDialog = true
      // 数据回显
      const res = await getClinetsDetail(id)
      // console.log(145, res)
      // console.log(146, this.$refs.addClient.$refs.img1.imgUrl)
      this.$refs.addClient.formData = res.data
      // this.$refs.addClient.$refs.img1.image = res.data.image
      // 图片回显
      this.$refs.addClient.$refs.img1.dialogImageUrl = res.data.image
    },
    // 搜索功能
    async searchFn() {
      if (this.agent_contains) {
        this.List.agent_contains = this.agent_contains
      } else {
        this.List.agent_contains = undefined
      }
      if (this.inputValue) {
        this.List.name_contains = this.inputValue
      } else {
        this.List.name_contains = undefined
      }
      this.getClientList(this.List)
    }
  }
}
</script>

<style>

</style>
